import React from 'react';
import { SwipeAction, List, Toast, Modal, Icon } from 'antd-mobile';
import { formataTodayTime } from '../../libs/util';
import './index.css';
import 'antd-mobile/dist/antd-mobile.css';

function todoItem(props) {
    const alert = Modal.alert;

    const { data, openCheckModel, openEditorModel, completedClick, removeItem } = props;

    const isShowUpdataTodo = formataTodayTime(data.id) === formataTodayTime(new Date()) ? true : false ;
    
    const showTost = (blog) =>{
            if(blog === 'del'){
                Toast.info('删除成功', 1);
            }else if(blog === 'upd'){
                Toast.info('此项不可修改', 1);
            }
    }
    const updataText = isShowUpdataTodo ?
                        '修改'
                        :
                        'NO';

    const updataStyle = isShowUpdataTodo ?
                       {
                        backgroundColor: '#ffe08a', 
                        color: 'white', 
                        width: '4.5rem'
                       }
                       :
                       {
                        backgroundColor: '#d5d5d5', 
                        color: 'white', 
                        width: '4.5rem'
                       };
    const defaultChecked = (val) => {
        return val ? true : false;
    }
    return (
        <List>
            <SwipeAction
                style={{ backgroundColor: '#fff' }}
                autoClose
                right={[
                    {
                        text: '查看',
                        onPress: () => openCheckModel(data.id),
                        style: { backgroundColor: '#00d1b2', color: 'white', width: '4.5rem' },
                    },
                    {
                        text: updataText,
                        onPress: () => { if(isShowUpdataTodo){
                            openEditorModel(data.id);
                            Toast.info('未修改',1); 
                        }else{
                            showTost('upd');
                            return
                        }
                    },
                        style: updataStyle,
                    },
                    // { backgroundColor: '#ffe08a', color: 'white', width: '4.5rem' },
                    {
                        text: '删除',
                        onPress: () => {
                            alert('删除', '确定删除此事件', [
                                { text: '取消', onPress: () => {return;} },
                                { text: '确定', onPress: () => {
                                removeItem(data.id);
                                showTost('del');
                                } 
                                },
                                ]);
                        },
                        style: { backgroundColor: '#F4333C', color: 'white', width: '4.5rem' },
                    },
                ]}
            //   onOpen={() => console.log('global open')}
            //   onClose={() => console.log('global close')}
            >
                <div className="box">
                    <div className="todoItem">
                        {
                            isShowUpdataTodo
                                ?
                                (
                                    <div className="check-box">
                                        {data.completed
                                        ?
                                        <Icon 
                                        type="check-circle" 
                                        size="xs" 
                                        color="#00d1b2"
                                        />
                                        :
                                        <Icon 
                                        type="check-circle-o" 
                                        size="xs" 
                                        color="#d5d5d5"
                                        onClick={() => data.completed = true}
                                        />
                                        }
                                        <input
                                            className="checkbox"
                                            type="checkbox"
                                            checked={data.completed}
                                            onChange={() => completedClick(data.id, defaultChecked(data.completed))}
                                        />
                                    </div>
                                )
                                :
                                ''
                        }
                        <span
                            className="conten"
                            style={{ 'textDecoration': data.completed ? 'line-through' : 'none' }}>
                            {data.content}
                        </span>
                        <span className="tag is-info is-light my-data-day">{formataTodayTime(data.id)}</span>
                    </div>
                </div>
            </SwipeAction>
        </List>
    );
}

export default todoItem;